import { TJob } from '@/types/index';
import { toLocalTime } from '@/utils';
import { useHistory } from 'react-router-dom';

const JobCard = ({ item, onDelete }: { item: TJob; onDelete: any }) => {
   let history = useHistory();
   const handleEdit = (id:string) => {
      history.push(`jobEdit/${id}`);
   };
   return (
      <div className="box flex flex-col" key={item._id}>
         <div className="flex space-x-4 border-b border-b-slate-200 py-2">
            <div className="w-12 h-12 bg-sky-600 rounded-md flex justify-center items-center text-slate-100 text-xl">
               <span>{item.company.slice(0, 1)}</span>
            </div>
            <div className="flex flex-col">
               <span className="font-semibold text-lg">{item.position}</span>
               <span className="text-slate-600">{item.company}</span>
            </div>
         </div>
         <div className="grid grid-cols-2 gap-x-12 gap-y-2 pt-2">
            <div>{item.location}</div>
            <div>{toLocalTime(item.createdAt)}</div>
            <div>{item.jobType}</div>
            <div>{item.status}</div>
         </div>
         <div className="flex space-x-2 mt-2">
            <button
               className="bg-sky-500 hover:bg-sky-700"
               onClick={handleEdit.bind(null, item._id)}
            >
               Edit
            </button>
            <button
               className="bg-red-500  hover:bg-red-700"
               onClick={onDelete.bind(null, item._id)}
            >
               Delete
            </button>
         </div>
      </div>
   );
};

export default JobCard;
